<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>工资信息管理系统</title>
<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-2.0.0.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/isLoginAdmin.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
body {
	background-color: #F8F8F8;
	display: flex;
	min-height: calc(100vh - 90px);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 60px;
}

.board {
	width: 440px;
	padding: 20px 30px;
	padding-bottom: 50px;
	background-color: white;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.title {
	color: rgba(0, 0, 0, 0.6);
	margin-bottom: 30px;
}

.layui-upload-img {
	width: 100px;
	height: 100px;
	display: block;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.2);
}

#picture {
	cursor: pointer;
}

.layui-form-pane {
	width: 100%;
}

.layui-elem-quote {
	height: 10px;
	line-height: 10px;
	width: 100%;
}
</style>
<body>

	<div class="board">
		<h1 class="title">添加个人信息</h1>
		<!-- 			<input type="file" id="picture-input" style="display: none;" /> -->
		<!-- 			<img class="layui-upload-img" src="" id="picture" alt="" title="点击选择图片" style="background-size: cover;"> -->
		<div class="layui-form-pane layui-form">
			<div class="layui-form-item" style="margin-top: 20px;">
				<label class="layui-form-label">登录密码</label>
				<div class="layui-input-block">
					<input id="password" type="text" name="title" autocomplete="off"
						placeholder="请输入内容" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 20px;">
				<label class="layui-form-label">员工姓名</label>
				<div class="layui-input-block">
					<input id="name" type="text" name="title" autocomplete="off"
						placeholder="请输入内容" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所属部门</label>
				<div class="layui-input-block">
					<select id="sector" name="interest" lay-filter="aihao">
						
					</select>
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 20px;">
				<label class="layui-form-label">员工职称</label>
				<div class="layui-input-block">
					<input id="named" type="text" name="title" autocomplete="off"
						placeholder="请输入内容" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 20px;">
				<div class="layui-inline">
					<label class="layui-form-label">入职日期</label>
					<div class="layui-input-inline">
						<input id="time" type="text" class="layui-input"
							placeholder="yyyy-MM-dd HH:mm:ss">
					</div>
				</div>
			</div>
			<div class="layui-form-item" style="margin-top: 20px;">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-block">
					<input id="phone" type="text" name="title" autocomplete="off"
						placeholder="请输入内容" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" pane="">
				<label class="layui-form-label">性别</label>
				<div id="sex" class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked="">
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<button id="ok" type="button" class="layui-btn"
				style="width: 100%; margin-top: 20px;">添加</button>
		</div>
	</div>

	<script type="text/javascript">
		layui.use([ 'form', 'layer', 'laydate', 'element' ], function() {
			var laydate = layui.laydate;
			var form = layui.form;
			
			// 获取部门
			$.ajax({
				url: "getAllSector",
				type: 'POST',
				data: {
					
				},
				success: function(result) {
					var data = "";
					for(var i = 0;i < result.length;i++){
						data += '<option>'+result[i].sector_name+'</option>';
					}
					$("#sector").html(data);
					form.render();
				},
				error: function(e) {
					console.log(e.status);
					layer.msg('获取失败');
				}
			});
			
			//日期时间选择器
			laydate.render({
				elem : '#time',
				type : 'datetime'
			});
			// 点击图片框开始选择图片
			$("#picture").click(function() {
				$("#picture-input").click();
			});
			// 上传图片预览
			$("#picture-input").on(
					"change",
					function() {
						var files = !!this.files ? this.files : [];
						if (!files.length || !window.FileReader)
							return;
						if (/^image/.test(files[0].type)) {
							var reader = new FileReader();
							reader.readAsDataURL(files[0]);
							reader.onloadend = function() {
								$("#picture").attr("src", "");
								$("#picture").css("background-image",
										"url(" + this.result + ")");
							}
						}
					});
			// 添加信息
			/* $("#ok").click(function() {
				var isNull = false;
				for (var i = 0; i < $("input").length; i++) {
					if ($("input").eq(i).val() == "") {
						isNull = true;
					}
				}
				if (isNull) {
					layer.msg("请补全内容");
				} else {
					var formData = new FormData();
					formData.append("picture", $('#picture-input')[0].files[0]);
					formData.append("password", $('#password').val());
					formData.append("id", $('#id').val());
					formData.append("name", $('#name').val());
					formData.append("sector", $('#sector option:selected').text());
					formData.append("named", $('#named').val());
					formData.append("time", $('#time').val());
					formData.append("phone", $('#phone').val());
					formData.append("sex", $("#sex input[type='radio']:checked").val());
					$.ajax({
						url: "",
						type: 'POST',
						async: false,
						data: formData,
						processData: false, // 使数据不做处理
						contentType: false, // 不要设置Content-Type请求头
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
						success: function(result) {
							if (result == 1) {
								layer.msg('添加成功');
							} else {
								layer.msg('添加失败');
							}
						},
						error: function(e) {
							console.log(e.status);
							layer.msg('添加失败');
						}
					});
				}
			}); */

			// 添加信息
			$("#ok").click(function() {
				var isNull = false;
				for (var i = 0; i < $("input").length; i++) {
					if ($("input").eq(i).val() == "") {
						isNull = true;
					}
				}
				if (isNull) {
					layer.msg("请补全内容");
				} else {
					$.ajax({
						url: "addUser",
						type: 'POST',
						data: {
							user_password: $("#password").val(),
							user_name: $("#name").val(),
							user_sector: $("#sector option:selected").text(),
							user_named: $("#named").val(),
							user_phone: $("#phone").val(),
							user_sex: $("#sex input[type='radio']:checked").val(),
						},
						success: function(result) {
							if(result > 0){
								layer.msg('添加成功');
							}else{
								layer.msg('添加失败');
							}
						},
						error: function(e) {
							console.log(e.status);
							layer.msg('添加失败');
						}
					});
				}
			}); 

		});
	</script>

</body>
</html>
